<template>
	<view class="content">
		<z-paging style="height: 100%;" ref="paging" auto-show-back-to-top :enable-back-to-top="currentIndex===tabIndex" v-model="dataList"
			@query="queryList" :fixed="false" :mounted-auto-call-reload="false" loading-more-no-more-text="暂无更多">
			<empty-view slot="empty">
				<no-data customClass="bg-f5"></no-data>
			</empty-view>
			<view>
				<block class="item" v-for="(item,index) in dataList" :key="item.id">

					<view @click="goMessageGetInfo(item)"
						class="bg-white border-r-6 u-p-t-26 u-p-b-26 u-p-l-10 u-p-r-20 u-m-b-20">
						<view class=" u-font-16 color-3  u-flex u-row-between">
							<view class="title u-rela">
								{{item.has_read === 0?'【未读】':'【已读】'}}{{item.type_text}}
								<u-badge v-if="item.has_read === 0" is-center type="error" :is-dot="true"></u-badge>
							</view>
							<u-image @tap.stop="remove(item.id)" width="14px" height="14px"
								src="@/pagesMy/static/remove.png">
							</u-image>

						</view>
						<view class="u-font-12 color-80 u-m-t-10 u-p-l-20">
							{{item.create_time}}
						</view>
					</view>


				</block>
			</view>
		</z-paging>
	</view>
</template>

<script>
	import {
		getMyMessage
	} from '@/api/user';
	import noData from '@/components/noData/noData.vue';
	export default {
		components: {
			noData
		},
		data() {
			return {
				dataList: [],
			}
		},
		props: {
			//当前组件的index，也就是当前组件是swiper中的第几个
			tabIndex: {
				type: Number,
				default: function() {
					return 0
				}
			},
			//当前swiper切换到第几个index
			currentIndex: {
				type: Number,
				default: function() {
					return 0
				}
			},
		},
		watch: {
			currentIndex: {
				handler(newVal) {
					if (newVal === this.tabIndex) {
						setTimeout(() => {
							this.$refs.paging.reload();
						}, 5);
					}
				},
				immediate: true
			},
		},
		methods: {
			async queryList(page, pageSize) {
				const postData = {
					page,
					pageSize,
					has_read: this.currentIndex - 1, // -1全部 0未读 1已读
				}
				const res = await getMyMessage(postData);
				this.$refs.paging.complete(res.data.list);
			},
			goMessageGetInfo(item) {
				uni.navigateTo({
					url: `/pagesMy/messageGetInfo/messageGetInfo?source=${item.type}&id=${item.id}`
				})
			}
		}
	}
</script>

<style>
	/* 注意，1、父节点需要固定高度，z-paging的height:100%才会生效 */
	/* 注意，2、请确保z-paging与同级的其他view的总高度不得超过屏幕宽度，以避免超出屏幕高度时页面的滚动与z-paging内部的滚动冲突 */
	.content {
		height: 100%;
		/* 父节点建议开启flex布局 */
		display: flex;
		flex-direction: column;
		padding: 0 28rpx;
	}
</style>
